const CompressionWebpackPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path')
const isProduction = process.env.NODE_ENV === 'production';
const productionGzipExtensions = ['js', 'css'];
module.exports = {
  productionSourceMap: false,
  publicPath: '/',
  configureWebpack: config => {
    // config.externals = {
    //   'vue': 'Vue',
    //   'vue-router': 'VueRouter'
    // }
    if (isProduction) {
      config.plugins.push(
        new UglifyJsPlugin({
          sourceMap: false,
          parallel: true,
        })
      )
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }))

      config.plugins.push(new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname,'dist'),
          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: ['/', '/home','/commonQuestion/dashboard'],
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
              // captureAfterTime: 10000,
              renderAfterTime: 500000,
              inject: {
                  foo: 'bar'
              },
              headless: false,
              // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
              renderAfterDocumentEvent: 'render-event'
          })
      }))
    }
  },
  devServer: {
    open: true, //配置自动启动浏览器
    port: 8080,
    https: false,
    disableHostCheck: true,
    host: '0.0.0.0',
    proxy: {
      '^/api': {
        // target: 'http://192.168.1.9:8085',
        target: 'http://172.16.103.12',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        }
      },
    }
  },
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        // args[0].title = ''
        return args
      })
    // config.module
    //   .rule('less')
    //   .oneOf('vue')
    //   .use('px2rem-loader')
    //   .loader('px2rem-loader')
    //   .before('postcss-loader') // this makes it work.
    //   .options({ remUnit: 37.5, remPrecision: 8 })
    //   .end()
  }
}
